<template>
	<view class="page-index" >
		<view  v-show="info!=''">
			<view class="job-card">
				<view class="job-title">
					{{info.title}}
				</view>
				<view class="stitle">
					{{info.salary}}
				</view>
				<view class="tag">
					<view class="tag-item">
						<image src="/static/work/pio_1.png"></image>
						<text class="text">{{info.areas_id}}</text>
					</view>
					<view class="tag-item">
						<image src="/static/work/pio_2.png"></image>
						<text class="text">{{info.age_id}}</text>
					</view>
					<view class="tag-item">
						<image src="/static/work/pio_3.png"></image>
						<text class="text">{{info.need}}</text>
					</view>
				</view>
				<view class="time">
					<text>更新:{{info.date}}</text>
					<text style="margin-left: 100rpx;">浏览:{{info.scan_num}}次</text>
				</view>
			</view>
			<view class="welfare">
				<view class="title">
					基本信息 
				</view>
				<view class="list">
					<view class="item">
						<view class="item-label">人数</view>
						<view class="item-value">2人</view>
					</view>
					<view class="item">
						<view class="item-label">期望时间</view>
						<view class="item-value">2024-12-09（周三）</view>
					</view>
					<view class="item">
						<view class="item-label">订单类型</view>
						<view class="item-value">服装设计</view>
					</view>
					<view class="item">
						<view class="item-label">服务地点</view>
						<view class="item-value"  @click="location()">
							<image class="icon" src="/static/work/pio_1.png"></image>
							<view style="flex:1;">{{info.address}}</view>
							<view style="color:#ff6600;">查看地图<i class="iconfont fontclassarrow_right"></i></view>
						</view>
					</view>
				</view>
			</view>
			<view class="company" @click="companyInfo()">
				<view class="title">
					物料明细
				</view>
				<view class="company-box gray">
					<image :src="info.company.logo" class="image-xl" mode=""></image>
					<view class="company-item">
						<view class="left">
							<view class="name">
								安装搬运 数量：1
							</view>
							<view class="value">
								重量：18kg
							</view>
							<view class="value">
								备注：暂无
							</view>
						</view>
						<view class="right"><i class="iconfont fontclassarrow_right"></i></view>
					</view>
				</view>
			</view>
			<view class="describe">
				<view class="title">
					接单要求
				</view>
				<text decode="true" class="decode">
					{{info.txt}}
				</text>
			</view>
			
			<view class="company" @click="companyInfo()">
				<view class="title">
					雇主信息
				</view>
				<view class="company-box">
					<image :src="info.company.logo" class="image" mode=""></image>
					<view class="company-item">
						<view class="left">
							<view class="name">
								{{info.company.name}}
							</view>
							<view class="value">
								{{info.company.scale}}·{{info.company.nature_id}}
							</view>
						</view>
						<view class="right">
							<i class="iconfont fontclassarrow_right"></i>
						</view>
					</view>
				</view>
			</view>
			<view class="remind"  @click="report()" v-if="oneself!=1">
				{{info.offerDetail}}
			</view>
			<view class="recommend" v-if="oneself!=1">
				相关推荐
			</view>
			<Work :workList='workList' :total='total' :text="texts" v-if="oneself!=1" />
			<view style="height: 250rpx;" v-if="oneself!=1">
			
			</view>
			<view class="fixed" v-if="oneself!=1&&userId!=info.id&&Type==0">
				<view class="fixed-box">
					<view class="share" @click="shareBnt()">
						<image src="/static/index/position-fx.png" mode=""></image>
						<view>
							分享
						</view>
					</view>
					<view class="collection" @click="collect()">
						<image src="/static/index/position-sc.png" v-if="info.collect==0"></image>
						<image src="/static/index/position-sco.png" v-if="info.collect==1"></image>
						<view>
							收藏
						</view>
					</view>
					<view class="chat" @click="call()">
						拨打电话
					</view>
					<view class="call" @click="chat()">
						在线直聊
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="code==0">
			<empty :text='text'></empty>
			<view class="">
				分享后查看需求次数 +{{resume_forward}}次
			</view>
			<view class="bnttview">
				<view class="back" @click="back()">
					返回
				</view>
				<view class="back" style="color: #FF7700;">
					分享
					<button open-type="share" class="bnt"></button>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="popup-box" v-if="popupShow">
			<view class="canvas" style="height: 70vh;margin-bottom: 4vh;"  >
				<view class="canvasmini" style="width: 90%;height: 90%;">
					<canvas style="height: 100%;width: 100%;" canvas-id="firstCanvas"></canvas>
				</view>
			</view>
		</view>
		<view class="share-box"  v-if="popupShow">
			<view class="topbox">
				 <!-- #ifndef APP-PLUS -->
				 <view class="vxbox" v-if="!baocShow" @click="close()">
					<image class="vxbox-img" src="../../../static/vip/vx.png" mode=""></image>
					<view class="text">微信好友</view>
					<button open-type="share" class="bnt"></button>
				 </view>
					   <!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="vxbox" v-if="!baocShow" @click="closeAPP()">
					<image class="vxbox-img" src="../../../static/vip/vx.png" mode=""></image>
					<view class="text">微信好友</view>
				</view>
				<!-- #endif -->
				<view class="hbbox" v-if="!baocShow" @click="shengcBnt()" >
					<image class="bcbox-img" src="../../../static/vip/sc.png" mode=""></image>
					<view class="text" >生成海报</view>
					
				</view>
				<view class="hbboxss" v-if="baocShow" @click="xiazBnt()" >
					<image class="bcbox-img" src="../../../static/vip/sc.png" mode=""></image>
					<view class="text" >保存海报</view>
					
				</view>
			</view>
			<view class="close-box" @click="close()">
				取消
			</view>
		</view>
<!-- 		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="dialog" cancelText="不切换" confirmText="切换身份" title="检测到您当前是需求方身份" content="是否切换成接单者身份查看需求信息？切换身份其他端会退出登录" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	import * as index from '@/api/index.js'
	import Work from '@/components/home/work/index.vue'
	import empty from '@/components/empty/index.vue'
	import * as user from '@/api/user.js'
	var that
	export default {
		components: {
			Work,
			empty
		},
		onLoad(params) {
			this.position_id = params.position_id
			this.oneself = params.oneself
			this.getPositionInfo()
			that = this
			uni.getSystemInfo({
					success: function (res) {
					that.Width=res.windowWidth;
				   }
			});
			//请求海报数据
			if (uni.getStorageSync('token')) {
				that.huizhihaibao()
				//链接goeazy
				let userInfo = uni.getStorageSync('userInfo')
				//链接im
				// return;
				if (this.goEasy.getConnectionStatus() == 'disconnected') {
					this.goEasy.connect({
						id: userInfo.id,
						data: {
							nickname: userInfo.name,
							avatar: userInfo.head
						},
						onSuccess: () => {
							this.latestConversations()
						},
						onFailed: (error) => {},
						onProgress: (attempts) => {}
					});
				}
			}
		},
		onShow(){
			// if(uni.getStorageSync('Type') == 0) {
			// 	this.$refs.alertDialog.open()
			// }
			this.getPositionInfo()
			this.userId = uni.getStorageSync('userInfo').id;
			this.nameGetConfig()
		},
		data() {
			return {
				Type: uni.getStorageSync('Type'),
				resume_forward: '', //转发次数
				my_fx: '', //转发背景图
				title: '', //分享标题
				imgage: '', //分享图片
				texts: '暂无推荐',
				userId:'',
				baocShow : false, //保存海报显示
				popupShow: false, //弹窗显示
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				userdata: {}, //个人数据
				swiperList: [] ,//海报数组
				detail:'',
				width:'375',
				height:'563',
				share:'',
				code:1,
				total:-1,
				oneself:'', //雇主自己查看详情
				position_id:'',
				info: '',
				form: {
					page: '',
					pages: '',
					neqId: '',
					search: '',
					member_id:'',
					drving_id: '',
					age_id: '',
					welfare_id: '',
					salary_id: '',
					position_id2: '',
					position_id: '',
					areas_pid: '',
					areas_id: '',
					secondary: '',
					is_index: '',
					neqId:'p'+uni.getStorageSync('userInfo').id
				}, //列表参数
				workList: [], //推荐需求列表
				text:'当前需求已关闭'
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				if(this.code == 0) {
					
					if (uni.getStorageSync('token')) {
						user.wxForwardGetAward({
							type: 0
						}).then(res => {
							uni.setStorageSync('shareType', '1');
						})
					}
					return {
						title: this.title, //分享标题
						imageUrl: this.imgage,
						path: '/pages/home/jobDetails/index?position_id=' + this.info.id
					}
				} else {
					if (uni.getStorageSync('token')) {
						user.wxForwardGetAward({
							type: 0
						}).then(res => {
							uni.setStorageSync('shareType', '1');
						})
					}
					return {
						title: this.info.name, //分享标题
						imageUrl: '',
						path: '/pages/home/jobDetails/index?position_id=' + this.info.id
					}
				}
			}
			return {
				title: this.info.name, //分享标题
				imageUrl: '',
				path: '/pages/home/jobDetails/index?position_id=' + this.info.id
			}
		},
		methods: {
			...mapMutations(['setRoleId']),
			// 不切换身份
			dialogClose() {
				uni.reLaunch({
					url:'/pages/home/index'
				})
			},
			// 切换身份弹窗
			dialogConfirm() {
				let Type =  uni.getStorageSync('Type')
				if(Type === 0) {
					Type = 1
					// let that = this
					// uni.setStorage({
					// 	key: 'link',
					// 	data: 'https://app.wanhedashuju.com/',
					// 	success: function () {
					// 		that.$tools.navigate('/pages/home/webView/index')
					// 	}
					// });
					// return
				} else {
					Type = 0
				}
				this.setRoleId(Type)
				uni.showLoading({
					title: '切换中'
				});
				setTimeout(res=>{
					uni.hideLoading()
				},2000)
			},
			nameGetConfig() {
				index.nameGetConfig({
					name: 'wx_share_image,wx_share_title,my_fx,resume_forward'
				}).then(res => {
					this.imgage = res.data.wx_share_image
					this.title = res.data.wx_share_title
					this.my_fx = res.data.my_fx
					this.resume_forward = res.data.resume_forward
					if (uni.getStorageSync('shareType') == 1) {
						uni.showToast({
							icon: 'none',
							title: `查看需求已+${res.data.resume_forward}条,\n感谢您助力鱼台就业。`,
							duration: 2000
						});
						uni.removeStorageSync('shareType');
					}
				})
			},
			huizhihaibao() {
				//数据请求结束
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				user.wxewm().then(res=>{
					that.userdata = {
						img: res.data.qrcode //二维码
					}
					that.swiperList = [{
							posterImg: res.data.bgImage//背景图
						},
					]
					uni.downloadFile({
						url: that.userdata.img,
						success: function(res) {
							that.userdata.img = res.tempFilePath
						}
					})
				})
				uni.hideLoading();
				//数据请求结束
			},
			// 举报
			report() {
					this.$tools.navigate('/pages/user/report/index?id=' + this.info.id)
			},
			selseimg(e) { //绘制海报
				uni.showLoading({
					title: '生成海报中'
				});
				const context = uni.createCanvasContext('firstCanvas')
				uni.downloadFile({
					url: e,
					success: function(res) {
						context.drawImage(res.tempFilePath, 0, 0, that.Width, that.Height) //海报背景
					}
				})
			
				setTimeout(()=> { //定时器，海报方法不能立即执行，等页面渲染完成
					context.drawImage(that.userdata.img, that.Width/2-45, that.Height/2-45, 90, 90) //二维码图片
					context.setFillStyle('#FFFFFF')
					context.setFontSize(14)
					context.save()
					context.beginPath()
					context.arc(44, 350, 25, 0, 2 * Math.PI)
					context.clip()
					context.restore()
					context.draw()
					uni.hideLoading();
					this.baocShow = true
				}, 2000);
			},
			// 生成海报
			shengcBnt() {
				setTimeout(res=>{
					uni.createSelectorQuery().in(this).select('.canvasmini').boundingClientRect(data => {
					that.Height = data.height
					that.Width = data.width
					}).exec()
					this.selseimg(this.swiperList[0].posterImg)
				},500)
			},
			xiazBnt(e) { //保存海报
				uni.showLoading({
					title: '保存海报中'
				});
				console.log('保存');
				let tempRatio = 1.5;
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: uni.upx2px(750), // 截取的画布的宽750
					height: uni.upx2px(1126), // 截取的画布的高1624
					destWidth: uni.upx2px(750), // 保存成的画布宽度750
					destHeight: uni.upx2px(1126), // 保存成的画布高度1624
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								uni.showToast({
									title: '保存相册成功'
								})
								that.imgsrc = res.tempFilePath
								if (e == 2) {
									console.log("自己写分享")
								}
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {
			
													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
			close(){
				this.popupShow = false //弹窗显示
				this.baocShow = false
			},
			closeAPP() {
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    // imageUrl: this.share.image,
				    imageUrl: 'https://xczp.wanhedashuju.com/uploads/20220107/125c54dad49a1c68b2796dd71128f698.png',
				    title: '县城直聘',
				    miniProgram: { 
				        id: 'gh_6b4bd9a933d2',
				        path: '/pages/home/jobDetails/index?position_id='+this.info.id,
				        type: 0,
				        webUrl: 'https://app.wanhedashuju.com/'
				    },
				    success: ret => {
				        console.log(JSON.stringify(ret));
				    }
				});
			},
			// 分享按钮
			shareBnt() {
				if(uni.getStorageSync('token')) {
					this.popupShow = !this.popupShow
				} else {
					this.$tools.toast('请登录')
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/login/index'
						})
					},1000)
				}
				
			},
			//获取需求详情
			getPositionInfo() {
				index.getPositionInfo({position_id:this.position_id}).then(res => {
					if(res.data){
						this.info = res.data
						this.code = res.code
						this.getPosotionList()
					}
					else{
						this.text = res.msg
						this.code = 0
					}
				})
			},
			//查看地图
			location() {
				uni.openLocation({
					latitude: parseFloat(this.info.latitude),
					longitude: parseFloat(this.info.longitude),
					success: function(res) {
						console.log(res);
					},
					fail: function(res) {
						console.log(res);
					},
				})
			},
			//需求列表
			getPosotionList() {
				this.form.page = 1
				this.form.pages = 3
				this.form.areas_pid = this.info.areas_pid //地区主id
				this.form.position_id = this.info.type_pid //1级分类id
				this.form.position_id2 = this.info.type_id //2级分类id
				this.form.rand = 1
				this.form.neqId  = this.position_id
				index.getPosotionList(this.form).then(res => {
					this.total = res.data.total
					this.workList = res.data.data
				})
			},
			//公司详情页面
			companyInfo() {
				this.$tools.navigate(`/pages/home/companyInfo/index?member_id=${this.info.member_id}`)
			},
			//拨打电话
			call(){
				index.memberGetPosotionTel({position_id:this.info.id}).then(res=>{
					uni.makePhoneCall({
						phoneNumber: res.data.tel //仅为示例
					});
				})
			},
			//收藏需求
			collect(){
				index.memberCollectPosition({collect_id:this.info.id,type:1}).then(res=>{
					if(this.info.collect==0) {
						this.$tools.succend('收藏成功!')
					} else {
						this.$tools.toast('取消收藏')
					}
					setTimeout(res=>{
						this.getPositionInfo()
					},500)
				})
			},
			chat(){
				this.$tools.navigate(`/pages/news/chat/index?userId=${'p'+this.info.member_id}&&title=${this.info.title}&&id=${this.info.id}`)
			},
			back(){
				// this.$tools.back(1)
				uni.reLaunch({
					url:'/pages/home/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		.job-card {
			padding: 38rpx 40rpx;
			background: #ffffff;

			.job-title {
				font-size: 38rpx;
				font-weight: 700;
				color: #333333;
			}

			.stitle {
				margin-top: 27rpx;
				font-size: 36rpx;
				font-weight: 700;
				color: #F24C19;
				line-height: 50rpx;
			}

			.tag {
				display: flex;
				align-items: center;
				margin-top: 18rpx;

				.tag-item {
					display: flex;
					align-items: center;
					margin-right: 16rpx;
					color: #666;
					letter-spacing: -0.52px;
					font-size: 26rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					.text {
						margin-left: 10rpx;
						font-size: 26rpx;
						color: #666;
						letter-spacing: -0.52px;
					}
				}

			}

			.time {
				padding-right: 36rpx;
				display: flex;
				// justify-content: space-between;
				margin-top: 26rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #9A9A9A;
				line-height: 37rpx;
			}
		}

		.welfare {
			margin-top: 10rpx;
			padding: 40rpx;
			background: #ffffff;

			.title {
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
			}

			.list {
				margin-top: 20rpx;
				.item {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 50rpx;
					line-height: 50rpx;
					.item-label {
						width: 140rpx;
						font-size: 26rpx;
					}
					.item-value {
						flex:1;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-size: 26rpx;
						font-weight: 400;
						color: #9A9A9A;
						.icon{
							width:30rpx;
							height:30rpx;
						}
					}
				}
			}
		}

		.describe {
			margin-top: 10rpx;
			padding: 40rpx;
			background: #ffffff;

			.title {
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
				.tab {
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					text-align: center;
					width: 170rpx;
					margin-right: 16rpx;
					padding: 6rpx 0rpx;
					background: #F6F6F6;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					letter-spacing: -0.48rpx;
				}
			}

			.decode {
				font-size: 28rpx;
				font-weight: 400;
				color: #555555;
			}
		}

		.address {
			margin-top: 10rpx;
			padding: 40rpx;
			background: #ffffff;

			.title {
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
			}

			.address-box {
				margin-top: 82rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #555555;
				display: flex;
				align-items: center;

				image {
					width: 33rpx;
					height: 40rpx;
					margin-right: 32rpx;
				}
			}

			.lookMap {
				margin-top: 21rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #FF7700;

				image {
					margin-left: 8rpx;
					width: 13rpx;
					height: 22rpx;
				}
			}
		}
		.company {
			margin-top: 10rpx;
			padding: 40rpx;
			background: #ffffff;

			.title {
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
			}

			.company-box {
				margin-top: 24rpx;
				display: flex;
				.image-xl{
					width: 128rpx;
					height: 128rpx;
					flex-shrink: 0;
					border-radius: 8rpx;
				}
				.image {
					width: 88rpx;
					height: 88rpx;
					flex-shrink: 0;
					border-radius: 8rpx;
				}

				.company-item {
					width: 100%;
					display: flex;
					// flex-direction: column;
					justify-content: space-between;
					margin-left: 14rpx;
					align-items: center;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;

						.name {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}

						.value {
							font-size: 26rpx;
							font-weight: 400;
							color: #333333;
							opacity: 0.65;
						}
					}
					.right{
					}
				}
			}

		}

		.remind {
			margin-top: 17rpx;
			padding: 32rpx 40rpx;
			background: #DCF2FF;
			font-size: 24rpx;
			font-weight: 400;
			color: #00A0FF;
		}

		.recommend {
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
			color: #333333;
			border-left: 8rpx solid #FF6600;
			padding-left: 16rpx;
		}

		.fixed {
			// margin-left: -40rpx;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: #FFFFFF;
			width: 100%;

			.fixed-box {
				padding: 36rpx 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-bottom: 10rpx;
				}

				.share {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}

				.collection {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}

				.chat {
					padding: 22rpx 49rpx;
					background: #41B6B5;
					border-radius: 15rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.call {
					padding: 22rpx 49rpx;
					background: #FF6600;
					border-radius: 15rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.empty{
			display: flex;
			flex-direction: column;
			align-items: center;
			.bnttview {
				display: flex;
				align-items: center;
				justify-content: center;
				.back{
					margin-left: 30upx;
					margin-top: 36rpx;
					width: 150rpx;
					text-align: center; 
					padding: 16rpx 32rpx;
					border: 1rpx solid #999999;
					color: #999999;
					border-radius: 16rpx;
					background-color: #fff;
					position: relative;
					.bnt {
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						margin-left: auto;
						margin-right: auto;
						padding-left: 0px;
						padding-right: 0px;
						box-sizing: border-box;
						// font-size: 18px;
						text-align: center;
						text-decoration: none;
						line-height: 1.2;
						// line-height: 1.35;
						// border-radius: 5px;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
						color: #FF6600;
						background-color: #fff;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
					button::after {
						border: none;
					}
				}
			}
			
		}
	}
	.popup-box {
		 background-color: rgba(173, 173, 173, 0.66);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100vh;
		.imag-box {
			height: 60vh;
			width: 375px;
			margin-bottom: 4vh;
			// background: #FFFFFF;
			// image {
			// 	width: 95%;
			// 	height: 100%;
			// }
		}

		.canvas {
			display: flex;
			justify-content: center;
			align-items: center;
			.canvasmini {
				border-radius: 15rpx;
				overflow: hidden;
			}
		}
	}
	.share-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999999;
		height: 26vh;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		.topbox {
			padding-top: 40rpx;
			display: flex;
			padding-left: 40rpx;
			padding-right: 40rpx;
			// justify-content: center;
			.vxbox {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.bnt {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
					z-index: 999;
				}
				.vxbox-img {
					width: 80rpx;
					height: 80rpx;
				}
				.text {
					margin-top: 12rpx;
				}
			}
			.hbbox {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.bcbox-img {
					width: 80rpx;
					height: 80rpx;
				}
				.text {
					margin-top: 12rpx;
				}
			}
			.hbboxss {
				width: 100%;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;
				.bcbox-img {
					width: 80rpx;
					height: 80rpx;
				}
				.text {
					margin-top: 12rpx;
				}
			}
		}
		.close-box {
			margin-top: 20rpx;
			border-top: 2rpx solid #f5f5f5;
			padding: 30rpx 20rpx 0rpx 20rpx;
			text-align: center;
		}
	}
</style>
